<script setup>

import VueBarcode from '@/components/Asset/VBarcode.vue';
import VQrCode from "@/components/Asset/VQrCode.vue";

  const props = defineProps({
    code: {
      type: String,
      required: true,
    },
    codePosition: {
      type: String,
      required: true
    },
    content: {
      type: Array,
      required: true
    },
    labelType: {
      type: [Number, String],
      required: true
    }
  })

</script>
<template>
  <div class="preview">
    <!-- 显示条形码 -->
    <div v-if="labelType===1 || labelType==='1'" class="box" :style="{ 'flex-direction': codePosition === 'top' ? 'column' : 'column-reverse' }">
      <div class="barCode">
        <vue-barcode :value="code" height="35" v-if="labelType===1 || labelType==='1'"></vue-barcode>
      </div>
      <div class="content" v-if="content.length < 4">
        <div v-for="(item, index) in content" style="width: 100%" class="row" :class="[codePosition === 'top' ? 'line-top' : 'line-bottom']">
          <span class="name" style="width: 90px;border-right: 1px solid">{{ item.name }}</span>
          <span class="value">{{ item.value }}</span>
        </div>
      </div>
      <div class="content" v-else>
        <div v-for="(item, index) in content" style="width: 50%" class="row" :class="[codePosition === 'top' ? 'line-top' : 'line-bottom']">

          <span class="value" style="border-right: 1px solid">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <!-- 显示二维码 -->
    <div v-if="labelType===2 || labelType==='2'" class="box" :style="{ 'flex-direction': codePosition === 'left' ? 'row' : 'row-reverse' }">
      <div class="barCode">
        <v-qr-code :value="code" v-if="labelType===2 || labelType==='2'"></v-qr-code>
      </div>
      <div style="flex-grow: 1;padding-left: 20px;padding-top: 20px;">
        <div v-for="(item, index) in content" class="row">
          <span class="name" style="width: 90px">{{ item.name }}</span>
          <span class="value">{{ item.value }}</span>
        </div>
      </div>

    </div>
  </div>
</template>

<style scoped lang="scss">

  .preview {
    display: flex;
    .box {
      border: 2px solid #000;
      display: flex;
      flex: 1;
      .content {
        display: flex;
        flex-shrink: 0;
        flex-wrap: wrap;
        .row {
          font-size: 12px;
          color: #000;
          display: flex;
          align-items: center;
          .name {
            height: 20px;
            line-height: 20px;
            padding-left: 3px;
            display: inline-block;
          }
          .value {
            flex: 100%;
            height: 20px;
            line-height: 20px;
            padding-left: 3px;
            display: inline-block;
          }
        }
        .line-top {
          border-top: 1px solid rgb(0, 0, 0);
        }
        .line-bottom {
          border-bottom: 1px solid rgb(0, 0, 0);
        }
      }
    }
  }


</style>